<template>
  <Header :msg="state.msg"
          :allTime="state.allTime"></Header>
</template>
<script lang="ts">
  import { Options, Vue } from "vue-class-component";
  import { Watch } from "vue-property-decorator";
  import Header from "@/components/header.vue";
  import { useStore } from "vuex";
  import * as StoreTypes from "@/store/state.types";
  interface State {
    msg: String;
    allTime: Number;
  }
  @Options({
    components: {
      Header,
    },
  })
  export default class App extends Vue {
    store = useStore();
    public state: State = {
      msg: "Sbotlp Vue3 TypeScript Ant-design",
      allTime: 0,
    };
    @Watch("store.state.planList", { immediate: true, deep: true })
    private onStoreChange(state: Array<StoreTypes.Payload>) {
      if (state && state.length) {
        this.state.allTime = state.map((item: StoreTypes.Payload) => item.time).reduce((p: number, n: number) => p + n, 0);
      }
    }
  }
</script>  
<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  * {
    margin: 0;
    padding: 0;
  }
  #components-layout-demo-top .logo {
    width: 120px;
    height: 31px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px 24px 16px 0;
    float: left;
  }
</style>
